import React from 'react';
import { Layout, Breadcrumb, Icon, Button, Checkbox, Modal, Input, Select, Form, message, TreeSelect, Tree, Tabs, DatePicker, Row, Col, Upload, Radio } from 'antd';
import { Link } from 'react-router';
import './advertising.less';
import $ from 'jquery';
import Config from '../../common/config';

const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const TreeNode = Tree.TreeNode;
const InputGroup = Input.Group;
const TabPane = Tabs.TabPane;
const { RangePicker } = DatePicker;
const RadioGroup = Radio.Group;

class advertisingDetailForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            addClassify: false, //增加分类弹出层
            modifyClassify: false, //修改分类弹出层
            deleteClassify: false, //删除，启用，停用，同步弹出层
        }
    }

    componentDidMount() {

    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, };
        const formItemLayout1 = { labelCol: { span: 4 }, wrapperCol: { span: 20 }, };
        const formItemLayout2 = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, };
        const props = {
            name: 'file',
            action: '//jsonplaceholder.typicode.com/posts/',
            headers: {
                authorization: 'authorization-text',
            },
        }
        return (
            <Form>
                <div className='goods-label' style={{ minWidth: 1250 }}>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                <Breadcrumb.Item>营销管理</Breadcrumb.Item>
                                <Breadcrumb.Item>广告管理</Breadcrumb.Item>
                                <Breadcrumb.Item>新增</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="广告名称" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName', {
                                            rules: [{ required: true, max: 30, message: '请输入广告名称，不超过30个字' }],
                                        })(
                                            <Input placeholder="请输入广告名称" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="页面名称" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName2', {
                                            rules: [{ required: true, message: '请选择页面名称！' }],
                                        })(
                                            <Select placeholder="请选择" >
                                                <Option value="首页">首页</Option>
                                                <Option value="导航">导航</Option>
                                                <Option value="启动页">启动页</Option>
                                            </Select>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="页面布局" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName3', {
                                            rules: [{ required: true, message: '请选择页面布局！' }],
                                        })(
                                            <Select placeholder="请选择" >
                                                <Option value="xx">xx</Option>
                                                <Option value="xxx">xxx</Option>
                                                <Option value="xxxx">xxxx</Option>
                                            </Select>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="广告位置" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName4', {
                                            rules: [{ required: true, message: '请选择广告位置！' }],
                                        })(
                                            <Select placeholder="请选择" >
                                                <Option value="首页轮播">首页轮播</Option>
                                                <Option value="首页导流入口">首页导流入口</Option>
                                                <Option value="特惠专区">特惠专区</Option>
                                                <Option value="特惠专区底部">特惠专区底部</Option>
                                                <Option value="特色频道1">特色频道1</Option>
                                                <Option value="特色频道1底部">特色频道1底部</Option>
                                                <Option value="特色频道2">特色频道2</Option>
                                                <Option value="特色频道2底部">特色频道2底部</Option>
                                                <Option value="特色频道3">特色频道3</Option>
                                                <Option value="特色频道3底部">特色频道3底部</Option>
                                                <Option value="首页弹屏">首页弹屏</Option>
                                            </Select>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="排序" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName5', {
                                            rules: [{ required: true, message: '请填写排序！' }],
                                        })(
                                            <Input placeholder="请填写排序！" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="开始时间" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName6', {
                                            rules: [{ required: true, message: '请填写开始时间！' }],
                                        })(
                                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="结束时间" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName7', {
                                            rules: [{ required: true, message: '请填写结束时间！' }],
                                        })(
                                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout1} label="广告介绍" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName8', )(
                                            <Input type="textarea" rows={6} style={{ marginBottom: 30 }} />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout1} label="图片" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName9', {
                                            rules: [{ required: true, message: '请上传图片！' }],
                                        })(
                                            <Upload {...props}>
                                                <Button>
                                                    <Icon type="upload" /> 选择文件
                                                </Button>&nbsp;&nbsp;未选择任何文件
                                            </Upload>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout1} label="关联类型" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName10', {
                                            rules: [{ required: true, }],
                                        })(
                                            <RadioGroup>
                                                <Radio value={1}>专场</Radio>
                                                <Radio value={2}>商品、服务</Radio>
                                                <Radio value={3}>链接地址</Radio>
                                                <Radio value={4}>为空</Radio>
                                                <Radio value={5}>搜索关键词</Radio>
                                                <Radio value={6}>分类</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="选择专场" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName11', {
                                            rules: [{ required: true, message: '请选择专场！' }],
                                        })(
                                            <Select placeholder="请选择" >
                                                <Option value="首页轮播">首页轮播</Option>
                                                <Option value="首页导流入口">首页导流入口</Option>
                                            </Select>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="专场编号" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName12', )(
                                            <p></p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="专场名称" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName13', )(
                                            <p></p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************商品及服务************/}
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="商品编号" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName14', {
                                            rules: [{ required: true, message: '请输入商品编号！' }],
                                        })(
                                            <Input placeholder="请输入商品编号！" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName15')(
                                            <Button className='member-button-aa' type='primary' style={{ marginLeft: 20 }}>查询</Button>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="商品名称" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName16', )(
                                            <p></p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************链接地址************/}
                            <Row gutter={16}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout1} label="链接地址" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName17', {
                                            rules: [{ required: true, message: '请输入链接地址！' }],
                                        })(
                                            <Input placeholder="请输入链接地址！" />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************搜索关键词************/}
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="搜索关键词" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName18', {
                                            rules: [{ required: true, message: '请输入搜索关键词!' }],
                                        })(
                                            <Input placeholder="请输入搜索关键词!" />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************分类************/}
                            <Row gutter={16}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout1} label="选择分类" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName19', {
                                            rules: [{ required: true, message: '请选择分类!' }],
                                        })(
                                            <div>
                                                <Row gutter={24}>
                                                    <Col span={8}>
                                                        <FormItem {...formItemLayout2} label="一级分类" style={{ minHeight: '70px', marginBottom: 0 }}>
                                                            {getFieldDecorator('ActivityName20')(
                                                                <Select placeholder="请选择" >
                                                                    <Option value="xx">xx</Option>
                                                                    <Option value="xxx">xxx</Option>
                                                                    <Option value="xxxx">xxxx</Option>
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={8}>
                                                        <FormItem {...formItemLayout2} label="二级分类" style={{ minHeight: '70px', marginBottom: 0 }}>
                                                            {getFieldDecorator('ActivityName21')(
                                                                <Select placeholder="请选择" >
                                                                    <Option value="xx">xx</Option>
                                                                    <Option value="xxx">xxx</Option>
                                                                    <Option value="xxxx">xxxx</Option>
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={8}>
                                                        <FormItem {...formItemLayout2} label="三级分类" style={{ minHeight: '70px', marginBottom: 0 }}>
                                                            {getFieldDecorator('ActivityName22')(
                                                                <Select placeholder="请选择" >
                                                                    <Option value="xx">xx</Option>
                                                                    <Option value="xxx">xxx</Option>
                                                                    <Option value="xxxx">xxxx</Option>
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************查看************/}
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="创建人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName23')(
                                           <p>李四</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="创建时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName24')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="审核人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName25')(
                                            <p>李四</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="审核时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName26')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="上线人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName27')(
                                           <p>system</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="下线时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName28')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="下线人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName29')(
                                            <p>system</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="下线时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName30')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************按钮************/}
                            <Row gutter={16} >
                                <Col span={12} style={{ textAlign: 'center' }}>
                                    <Button className='member-button-aa' type='primary' style={{ marginLeft: 20, width: 100, height: 40 }}>保存</Button>
                                    <Button className='member-button-aa' type='primary' style={{ marginLeft: 40, width: 100, height: 40 }}>取消</Button>
                                </Col>
                            </Row>
                        </div>

                    </div>
                </div>
            </Form>
        )
    }
}

const AdvertisingDetail = Form.create()(advertisingDetailForm);
export default AdvertisingDetail;